<template>
  <div class="body">
    <div class="left-body"  :style="{ width, border }">
      <LeftMenuComponent></LeftMenuComponent>
    </div>
    <div class="right-body">
      <div class="content-wrapper">
        <div class="top-component">
          <TopComponent></TopComponent>
        </div>
        <div class="router-view-content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import LeftMenuComponent from "@/components/LeftMenuComponent.vue";
import TopComponent from "@/components/TopComponent.vue";
import {useStore} from "vuex";

const store = useStore();
const width = computed(() => {
  return store.state.isCollapse ? '60px' : '200px';
});
const border = computed(() => {
  return store.state.isCollapse ? '0px solid ' : '1px solid #94a4b1'
});


</script>

<style scoped>
.body {
  display: flex;
  overflow: hidden; /* 隐藏超出部分 */
  height: 100vh;
}
.left-body {
  width: 200px; /* 侧边栏默认宽度 */
  transition: all 0.3s; /* 平滑过渡效果 */
  overflow: hidden;
  position: relative;
  height: 100%;
}
.right-body {
  flex-grow: 1;
  transition: margin-left 0.3s;
  position: relative;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.top-component {
  flex-shrink: 0; /* 确保顶栏不参与滚动 */
}

.router-view-content {
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto; /* 当内容超出时显示滚动条 */
}
.left-body {
  width: 60px; /* 侧边栏折叠后的宽度 */
}

</style>